<template>
    <div>
        <bufantop></bufantop>


        <!-- 编辑地址设置 -->
    
        <div class="item">
            <van-field v-model="name" type="text" placeholder="姓名" />
        </div>
        <div class="item">
            <van-field v-model="tel" type="tel" placeholder="手机号码" />
        </div>
        <div class="item">
            <van-field readonly  placeholder="省份、城市、区县" @click="switchs" class="area" v-model="city" />
            <van-popup v-model="show" position="bottom" :style="{ height: '50%' }" >
                <van-area title="标题" :area-list="areaList" @confirm="getArea" />
            </van-popup>
        </div>
        <div class="item">
            <van-field v-model="detail" type="text" placeholder="详细地址，如楼道、楼盘号等" />
        </div>
        <div class="item item0">
        <van-checkbox v-model="checkeds" shape="square" checked-color="#ee0a24">设置为默认地址</van-checkbox>
        </div>
    
        <div class="address-save" @click="saveAddress">保存</div>





    </div>
</template>

<script>
import areaList from "@/assets/area.js";
import {detailAction,saveAction} from '@/api/mine/address';
import bufantop from '@/components/bufantop.vue'

export default {
    data(){
        return{
            list:[],
            // 选择地区时的数据
            areaList,
            // 填写信息
            name:"",
            tel:"",
            detail:"",
            //是否默认
            checkeds:false,
            // 选择地址弹出
            show:false,
            //存放选择的地址
            city:"",
            // 个人ID
            openId:localStorage.getItem("openId"),
            id:"",
        }
    },
    created(){
        // 接收来自地址列表的值
        
        var item = JSON.parse(this.$route.query.item)
        console.log(JSON.parse(this.$route.query.item));



        detailAction({
            id:item.id
        }).then(res=>{
            console.log(res.data);
            if(res.data.is_default==0){
                    res.data.checkeds=false;
                }else{
                    res.data.checkeds=true;
                }
            
            this.list=res.data;
            console.log(res.data);
            this.name=this.list.name;
            this.tel=this.list.mobile;
            this.city=this.list.address;
            this.detail=this.list.address_detail;
            this.checkeds=this.list.checkeds;
            this
            this.id=JSON.stringify(this.list.id) 
        })
    },
    components:{
        bufantop
    },
    methods:{
      // 点击选择地址出现
        switchs(){
            this.show = !this.show
        },
        // 选择地址渲染到页面
        getArea(res){
            console.log(res);
            var country='';
            for(var i = 0;i<res.length;i++){
                country= country + res[i].name + ' ';
            }
            document.querySelector(".area").innerHTML = country
            this.city=country
            this.show = !this.show
            console.log(this.name);
            console.log(typeof this.name);
        },
        //保存地址到后台
        saveAddress(){
            console.log(this.checkeds);
            saveAction({
                address:this.city,
                addressId:'1415',
                checked:this.checkeds,
                detailadress:this.detail,
                openId:this.openId,
                telNumber:this.tel,
                userName:this.name,
            }).then(res=>{
                if(res.data==true){
                    this.$toast('保存成功');
                    this.$router.push("/mine/address");

                }else{
                    this.$toast('保存失败');
                }
                
            })
        }
    }
}
</script>

<style lang="scss" scoped>
     .item{
        padding: 5px 0;
        margin: 0 15px;
        border-bottom: 1px solid #f4f4f4;
        }
    .item.item0{
        border-bottom:none;
        margin-top: 20px;
    }
    .address-save{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50px;
        line-height: 50px;
        background: #b4282d;
        color: #fff;
        font-size: 16px;
    }
    .van-cell::after{
        border: none;
    }
</style>